<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网易云音乐首页</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/iconfont.css" />
	</head>
	<body>
		<!--top-->
		<div class="top">
			<img src="img/top.jpg" />		
		</div>
		
		<!--head-->
		<div class="b_head">
		   <div class="head">
		      <i class="iconfont icon-yinle1"></i>
		      <p><i class="iconfont icon-sousuo"></i><input type="text" placeholder="搜索音乐、歌词、电台" /></p>
		      <i class="iconfont icon-yinle"></i>
		   </div>
		</div>
		
		<!--nav-->
		<div class="nav">
			
			<ul>
				<li><a href="#">个性推荐</a></li>
				<li><a href="#">歌单</a></li>
				<li><a href="#">主播电台</a></li>
				<li><a href="#">排行榜</a></li>
			</ul>
		</div>
		
		<!--banner-->
		<div class="banner">
			<img src="img/banner.jpg"> 
		</div>
		
		<!--content01-->
		<div class="content01">
			<div class="box"><a href="#"><i class="iconfont icon-ttpodicon"></i></a><p>私人FM</p></div>
			<div class="box"><a href="#"><i class="iconfont icon-diepian"></i></a><p>开启个性推荐</p></div>
			<div class="box"><a href="#"><i class="iconfont icon-bd1"></i></a><p>云音乐新歌榜</p></div>
			
		</div>
		
		<!--content02-->
		<div class="content02">
			<div class="box01">
			<p><i class="iconfont icon-ttpodicon1"></i> 推荐歌单</p>
			<p><a href="#">更多 <i class="iconfont icon-jinru"></i></a></p>
			</div>
			<div class="b_box">
			<div class="box02">
				<a href="#"><img src="img/pic01.jpg"></a>	
				<p>华语女声||那些入耳入心的代表曲</p>
			</div>
			<div class="box02">
				<a href="#"><img src="img/pic02.jpg"></a>	
				<p>『钢琴后摇』初雪点地，窸窣低语</p>
			</div>
			<div class="box02">
				<a href="#"><img src="img/pic03.jpg"></a>	
				<p>云音乐热歌榜</p>
			</div>
			<div class="box02">
				<a href="#"><img src="img/pic04.jpg"></a>	
				<p>【电音】慎入|高端毒品，症状是...</p>
			</div>
			<div class="box02">
				<a href="#"><img src="img/pic05.jpg"></a>	
				<p>国乐的失落与回归【明清小说篇】</p>
			</div>
			<div class="box02">
				<a href="#"><img src="img/pic06.jpg"></a>	
				<p>『一听就上瘾的外语歌』</p>
			</div>
			</div>
		</div>
		
		<!--footer-->
		<div class="footer">
			<div class="box03">
				<p><a href="#"><i class="iconfont icon-wangyiyunyinlezizhi-copy"></i></a></p>
				<p>发现音乐</p>
			</div>
			<div class="box03">
				<p><a href="#"><i class="iconfont icon-iconset0163"></i></a></p>
				<p>我的音乐</p>
			</div>
			<div class="box03">
				<p><a href="#"><i class="iconfont icon-pengyou"></i></a></p>
				<p>朋友</p>
			</div>
			<div class="box03">
				<p><a href="#"><i class="iconfont icon-zhanghao01"></i></a></p>
				<p>账号</p>
			</div>
		</div>
	</body>
</html>
